<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Demo</title>
<script src="${basePath}jquery-1.12.4/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	// 获取ajax引擎对象
	function getAjaxEngine() {
		// ajax引擎对象
		var ajaxEngine = null;
		// 使用异常处理机制获取不同浏览器下的Ajax引擎对象
		try {
			// ff op safari chrome 浏览器Ajax引擎
			ajaxEngine = new XMLHttpRequest();
		} catch (e) {
			// 尝试 ie浏览器
			try {
				xmlHttpR = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				xmlHttpR = new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		// 返回ajax引擎对象
		return ajaxEngine;
	}

	// 定义一个全局的Ajax引擎对象
	var ajaxEngine = null;

	// ajax处理函数
	function doPostAjax() {
		//获取Ajax引擎对象
		ajaxEngine = getAjaxEngine();
		// 获取成功之后，进行ajax请求处理
		if (ajaxEngine) {
			// 请求的服务器连接（和form表单的action属性一样）
			var url = "${basePath}AjaxDemoServlet";
			// 打开Ajax引擎对象:第一参数是指明http请求的方式 get/post
			// 第二个参数：请求的服务器连接；第三个参数：是否采用异步处理；			
			ajaxEngine.open("post", url, true);
			// 组织 post方式ajax请求发送给服务器的数据内容： 变量名=变量值&变量名=变量值
			var data = "txtName=" + document.getElementById("txtName").value
					+ "&txtAge=" + document.getElementById("txtAge").value;
			// 设置post方式ajax请求的content-type
			ajaxEngine.setRequestHeader("Content-Type",
					"application/x-www-form-urlencoded");
			// 发送ajax请求
			ajaxEngine.send(data);
			// 设置ajax请求会后的回调函数
			ajaxEngine.onreadystatechange = doCallBack;
		}
		// ajax回调函数
		function doCallBack() {
			
			// Ajax引擎的对象状态状态已经完成
			if (ajaxEngine.readyState == 4) {
				// 判定服务器状态 ： 200表示服务器响应成功
				if (ajaxEngine.status == 200) {
					alert("获取的服务器响应内容 :" + ajaxEngine.responseText);
				} else {
					alert("出现错误:" + ajaxEngine.status);
				}
			}
		}
	}
</script>
<script type="text/javascript">
function doJqueryAjax(){
	$.ajax({
		   type: "POST",  // 请求的类型 get/post
		   url: "${basePath}AjaxDemoServlet", // 服务器url
		   //async: true, // 是否是进行异步 默认是true
		   dataType: "text", // 服务器返回的数据类型
		   /*data: "txtName=" + $("#txtName").val()
			+ "&txtAge=" + $("#txtAge").val(), */ // 发送给服务器的数据
			data:$("#myForm").serialize(),
			success: function(data){  // 成功之后的回调函数
		     alert( "Data Saved: " + data );
		   }		   
		});
}
</script>
</head>
<body>
	<form id="myForm">
		姓名：<input type="text" id="txtName" name="txtName"> 年龄：<input
			type="text" id="txtAge" name="txtAge"> 
			<input type="button"
			value="原生态的ajax" onclick="doPostAjax()">
			<input type="button"
			value="Jquery的ajax" onclick="doJqueryAjax()">
	</form>
</body>
</html>